<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由嵌套使用</title>
</head>
<body>

<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/login/register">注册</router-link>
    <router-view></router-view>
</div>


<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>

    const login = {
        template:`
           <div>
                 <h1>欢迎登录</h1>
                 <form action="">
                    <p><input type="text" placeholder="请输入用户名"></p>
                    <p><input type="text" placeholder="请输入密码"></p>
                    <p><input type="submit" value="立即登录"></p>
                 </form>
                 <router-view></router-view>
            </div>
        `
    }
    const register = {
        template:`
           <div>
                 <h1>欢迎注册</h1>
                 <form action="">
                    <p><input type="text" placeholder="请输入用户名"></p>
                    <p><input type="text" placeholder="请输入密码"></p>
                    <p><input type="submit" value="立即注册"></p>
                </form>
            </div>
        `
    }
    //  定义路由列表
    const  routes = [
        // 用户访问 /login 路径是  login组件被匹配
        {
            path:'/',
            redirect:'/login'   //  重定向 路径
        },
        {
            path:'/login',
            name:'login',
            component:login,
            children:[
                {
                    path:'register',
                    name:'register',
                    component:register,
                }
            ]
        }


    ]

    // 创建路由对象
    const router = new VueRouter({
        routes
    })

    const vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        router
    })


</script>



</body>
</html>
